<template>
  <div class="page-container">
    <el-card class="full-card">
      <!-- 操作栏 -->
      <div class="toolbar">
        <el-dropdown size="small" @click="handleAdd" @command="dropdownClick" split-button type="primary">
          新增单词
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="jsonImport">
              <el-button size="mini" type="text">通过JSON导入</el-button>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-button size="mini" type="text">通过Excel/CSV导入</el-button>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="searBtn">
          <el-input
            v-model="fullSpell"
            placeholder="搜索单词"
            clearable
            @clear="fetchData"
            @keyup.enter.native="fetchData"
          />
          <div class="button-box">
            <el-button type="text" size="mini" @click="fetchData(false)">模糊搜索</el-button>
            <el-button type="text" size="mini" @click="fetchData(true)">精准搜索</el-button>
          </div>
        </div>

      </div>

      <!-- 表格部分：设置高度+overflow -->
      <div class="table-container">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          height="100%"
        >
          <el-table-column type="index" label="序号" width="50"/>
          <el-table-column prop="fullSpell" label="单词全拼">
            <template #default="{row}">
              <div style="display: flex;align-items: center">
                <el-tag style="cursor: pointer">{{ row.fullSpell }}</el-tag>
                <audio-playback style="margin-left: 5px;display: flex;align-items: center" :word-id="row.id"/>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sequence" label="排序"/>
          <el-table-column prop="rootSummary" label="词根汇总" show-overflow-tooltip min-width="400"/>
          <el-table-column prop="difficultyLevel" label="难度等级" width="80"/>
          <el-table-column prop="occurrence" label="频次"/>
          <el-table-column prop="createTime" label="入库时间" min-width="100"/>
          <el-table-column label="操作" width="180">
            <template #default="{row}">
              <el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        class="pagination"
        :total="total"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 100]"
        :current-page="pageNum"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </el-card>

    <add-word
      v-if="addWordVisible"
      :visible.sync="addWordVisible"
      :word-form="wordForm"
      @refresh="fetchData"
    />

    <add-word-by-json
      v-if="addWordByJsonVisible"
      :visible.sync="addWordByJsonVisible"
      @refresh="fetchData"
      @transfer="(data) => { resultData = data; showResultVisible = true;}"
    />

    <result-show-dialog
      v-if="showResultVisible"
      :result-data="resultData"
      :visible.sync="showResultVisible"
      @refresh="fetchData"
    />
  </div>
</template>

<script>
import { selectPage, deleteWord } from '@/api/wordSystemWordLibrary'
import AudioPlayback from '@/views/component/audioPlayback.vue'
import AddWord from '@/views/wordLibrary/wordRoot/addWord.vue'
import AddWordByJson from '@/views/wordLibrary/wordRoot/addWordByJson.vue'
import ResultShowDialog from '@/views/wordLibrary/wordRoot/ResultShowDialog.vue'

export default {
  components: { ResultShowDialog, AddWordByJson, AddWord, AudioPlayback },
  data() {
    return {
      tableData: [],
      resultData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      addWordVisible: false,
      addWordByJsonVisible: false,
      showResultVisible: false,
      fullSpell: '',
      wordForm: {}
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData(exactMatch) {
      selectPage({
        page: { pageNum: this.pageNum, pageSize: this.pageSize },
        param: { fullSpell: this.fullSpell, exactMatch: !!exactMatch }
      }).then(res => {
        this.tableData = res.records
        this.total = res.total * 1
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.fetchData()
    },
    handleAdd() {
      this.wordForm = {
        id: null,
        name: '',
        code: '',
        type: '',
        price: null,
        quantity: null
      }
      this.addWordVisible = true
    },
    dropdownClick(command) {
      if (command === 'jsonImport') {
        this.addWordByJsonVisible = true
      } else {
        this.$message.info('一一')
      }
    },
    handleEdit(row) {
      this.wordForm = Object.assign({}, row)
      this.addWordVisible = true
    },
    handleDelete(row) {
      this.$confirm('确定删除该单词吗？', '提示', {
        type: 'warning'
      }).then(() => {
        deleteWord({ id: row.id }).then(() => {
          this.$message.success('删除成功')
          this.fetchData()
        })
      }).catch(() => {
      })
    }

  }
}
</script>
<style scoped>
.page-container {
  height: calc(100vh - 50px);
  padding: 20px;
  box-sizing: border-box;
}

.full-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.table-container {
  flex: 1;
  overflow: hidden;
  height: calc(100vh - 219px);
}

/* 保证分页栏不被挤压 */
.pagination {
  margin-top: 10px;
  text-align: right;
}

.searBtn {
  display: flex;
  align-items: stretch; /* 让右侧按钮盒子和输入框等高 */
  gap: 8px; /* 输入框与按钮之间的间距，可根据需要调整 */
}

.searBtn /deep/ .el-input__inner {
  padding: 0 0 0 15px;
}

.button-box {
  display: flex;
  flex-direction: column; /* 垂直排列按钮 */
  justify-content: space-between; /* 让按钮平分高度 */
  height: 100%; /* 高度继承自父容器，即输入框 */
}

.button-box .el-button {
  flex: 1; /* 平分按钮高度 */
  margin: 0; /* 去除按钮间外边距 */
  padding: revert
}

.toolbar .el-button {
  padding: unset;
  width: 72px;
  height: 32px;
}

::v-deep .el-dropdown__caret-button {
  height: 32px;
}
</style>

